<template>
    <!--背景的div -->
    <div class="bg">
          <!--登录框的div -->
        <div class="login">
              <div class="logo">
                   <img :src="logo" alt="" width="70px" height="70px">
                   <h1 class="ml">动力港能源管理平台</h1>
               </div>
                
               <!--使用Eleme UI的表单组件 -->
               <el-form :model="ruleForm" :rules="rules" ref="formRef">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名" prefix-icon="User" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" placeholder="请输入密码" prefix-icon="Lock" type="password"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%;" @click="handleLogin">登录</el-button>
                    </el-form-item>
                </el-form>
        </div>
    </div>
</template>


<script setup lang="ts">
import logo from "@/assets/logo.png"
import { reactive,ref } from "vue";
import type { FormRules,FormInstance } from 'element-plus'

// 1.引入Pinia中的useUserStore(定义了操作用户数据的方法)
import { useUserStore } from "@/store/auth.ts";


//2.引入路由,因为当登录成功之后需要跳转到其他的页面
import { useRouter } from "vue-router";



//3.定义登录表单提交的数据类型,以及响应数据类型reactive
interface RuleForm {
    username: string;
    password: string
}
const ruleForm: RuleForm = reactive({
    username: "",
    password: ""
})


//4.定义表单的校验规则reactive
const rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: "用户名不能为空", trigger: "blur" },
        { min: 4, max: 8, message: "用户名要求4-8位数字字母组合", trigger: "blur" }
    ],
    password: [
        { required: true, message: "密码不能为空", trigger: "blur" }, 
    ]
})

//5.这个是用来创建表单的引用的。(这个在<el-form :model="ruleForm" :rules="rules" ref="formRef"> elementPlus的表单中加了ref="formRef"的属性,这样就可以在js代码中获得表单的引用)
const formRef=ref<FormInstance>();

const userStore=useUserStore()
const router=useRouter()


//6.点击登录按钮的方法
const handleLogin=()=>{
    formRef.value?.validate(async (valid:boolean)=>{
        if(valid){ //校验通过
            await userStore.login(ruleForm);    //这个地方为什么要加一个await呢？ 因为router.push("/")可能执行在serStore.login(ruleForm)代码的前面。
            router.push("/")
        }
    })
}
</script>



<style lang="less" scoped>
    .bg{
        background-image: url("../assets/bg.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
    }
    .login{
        width: 500px;
        height: 300px;
        padding: 50px;
        box-shadow: 0 0 10px 10px #f4f4f4;
        text-align: center;
        position: absolute;
        top: 50%;
        margin-top: -200px;
        left: 10%;
    }

    .logo{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
    }

    h1{
        color:rgb(14, 53, 148);
    }
</style>